<!-- 收藏 -->
<template>
  <div class="collection-main">
      <Navbar :title="title"/>
      <div class="collectionList">
         <div class="collectionItem" v-for="item in collectList" :key="item.id" @click="goGoods(item.id)">
           <img  class="Img" :src="item.list_pic_url" alt="">
           <div class="info">
             <div class="infoName">{{item.name}}</div>
             <div class="infoprice">¥ {{item.retail_price}}</div>
           </div>
         </div>
      </div>
  </div>
</template>

<script>
import Navbar from '@/components/Navbar'
import collectionApi from '@/api/collection/index'
export default {
 name:'collection',
 components:{
     Navbar
 },
  data() {
    return {
        title:'我的收藏',
        collectList:[]
    };
  },
  created() {
      this.getCollection()
  },
  methods:{
      getCollection(){
        collectionApi.collectList({
            openId:'15845697415'
        })
        .then(res=>{
            this.collectList=res.collectGoodsList
        })
      },
      goGoods(id){
         this.$router.push({name:'goods',params:{id}})
      }
  }

};
</script>
<style lang='scss' scoped>
.collection-main{
  .collectionList{
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .collectionItem{
      width: 49%;
      background-color: #fff;
      margin-bottom: 5px;
      .Img{
        width: 150px;
        height: 150px;
        padding-left: 50%;
        margin-left: -75px;
      }
      .info{
        margin-left: 10px;
        color: #000;
        .infoprice{
          padding: 5px 0;
          color: $baseColor;
        }
      }
    }
  }

}
</style>